// ** Third Party Components
import axios from 'axios'
import { FileText } from 'react-feather'
import { UncontrolledTooltip } from 'reactstrap'

export let data

// ** Get initial Data
axios.get('/api/datatables/initial-data').then((response) => {
  data = [
    {
      title: '社区安全演习',
      content: '时间:2023-09-12,参与人：全体社区工作者',
      type: {
        value: 1,
        label: '通知公告',
      },
      status: {
        value: 0,
        label: '未处理',
      },
      degree: '一般',
    },
    {
      title: '报警通知',
      content: '某某社区老人紧急呼救',
      type: {
        value: 2,
        label: '报警',
      },
      status: {
        value: 0,
        label: '未处理',
      },
      degree: '紧急',
    },
    {
      title: '商户入驻申请',
      content: '由某某发起的商户入驻申请',
      type: {
        value: 0,
        label: '申请',
      },
      status: {
        value: 0,
        label: '未处理',
      },
      degree: '一般',
    },
  ]
})

// 事务类型
export const typeEnum = {
  0: '申请',
  1: '通知公告',
  2: '报警',
}

// 事务状态
export const statusEnum = {
  0: {
    color: '#ea5455',
    label: '未处理',
  },
  1: {
    color: '#56affd',
    label: '已处理',
  },
}

// 紧急程度
const degreeEnum = {
  0: '紧急',
  1: '一般',
}

export const columnsFun = (handleDeal) => {
  return [
    {
      name: '标题',
      minWidth: '100px',
      cell: (row) => row.title,
    },
    {
      name: '内容',
      minWidth: '150px',
      selector: (row) => row.content,
    },
    {
      name: '事务类型',
      minWidth: '150px',
      selector: (row) => row.type.label,
    },
    {
      name: '事务状态',
      minWidth: '100px',
      cell: (row) => (
        <span
          style={{
            color: statusEnum[row.status.value].color,
            border: `1px solid ${statusEnum[row.status.value].color}`,
            borderRadius: '4px',
            padding: '1px 4px',
          }}
        >
          {row.status.label}
        </span>
      ),
    },
    {
      name: '紧急程度',
      minWidth: '100px',
      selector: (row) => row.degree,
    },
    {
      name: '操作',
      width: '200px',
      selector: (row) => (
        <div
          className="column-action d-flex align-items-center"
          style={{ color: '#7367f0' }}
        >
          {row.status.value === 0 && row.type.value !== 1 ? (
            <div
              className="ms-50 cursor-pointer"
              onClick={() => {
                handleDeal(row.type.value)
              }}
            >
              处理
            </div>
          ) : null}
          <div className="ms-50 cursor-pointer">详情</div>
        </div>
      ),
    },
  ]
}
